<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>轨迹回放</title>
    <link href="openlayers/ol.css" rel="stylesheet">
    <script src="openlayers/ol.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width:1200px;height:800px;"></div>
<button id="btn">轨迹回放</button>





<script>
    // 获取轨迹点
    var points = [[84.2338649731473, 46.9980047642077],[84.2358787314379, 46.9903950411395],[84.2360025797725, 46.9826526644748],[84.2365146231591, 46.9743772668377],[84.2430627550276, 46.9704285974159],[84.2544759357883, 46.9622594654684],[84.25237499722, 46.9555587033631],[84.2615284200414, 46.9512233200727],[84.2590258379595, 46.9484807251292],[84.2562728036859, 46.9438554786575],[84.2565018295304, 46.9423523949852],[84.2521304283928, 46.9304640205582],[84.2475515104956, 46.9227572363613],[84.2471741540728, 46.9209215105576],[84.2465798281165, 46.9194117188421],[84.2478669476974, 46.9174557024216],[84.2466212436945, 46.9148485642615],[84.246840676471, 46.9100484985806],[84.2462431300427, 46.9080758860713],[84.2445547662472, 46.9044488492808],[84.2441290451849, 46.9015561134237],[84.2431952071762, 46.8949042510542],[84.2399810392366, 46.8923210114776],[84.2358955253774, 46.8884480245011],[84.2307111856887, 46.8809267515533],[84.2268759774321, 46.8749731452903],[84.2251647798504, 46.8702888754147],[84.2210820808693, 46.8654940770629],[84.2183454817056, 46.8624735070761],[84.214777579835, 46.8561853386291],[84.1829878537134, 46.8408418633944],[84.1604752629503, 46.8359071620111],[84.14323589457, 46.8281640209226],[84.1394826244426, 46.8262602524141],[84.1393611790965, 46.8246789735907],[84.1376699842354, 46.8222146900367],[84.136939722157, 46.8165169525826],[84.133769512179, 46.8122211817296],[84.1319446330982, 46.8109214365667],[84.1308211163823, 46.8084655239024],[84.1231500613502, 46.8027424489492],[84.1084857918836, 46.7944306242734],[84.1029093432934, 46.7949752123256],[84.0953348502665, 46.7990853370312],[84.0824467948676, 46.8023291619133],[84.0669365601476, 46.8014672489825],];


    // 轨迹
    var route = new ol.geom.LineString(points);
    var routeCoords = route.getCoordinates();
    var routeLength = routeCoords.length;

    // 轨迹线要素
    var routeFeature = new ol.Feature({
        type: 'route',
        geometry: route
    });

    // 轨迹点要素
    var geoMarker = new ol.Feature({
        type: 'geoMarker',
        geometry: new ol.geom.Point(routeCoords[0])
    });

    // 创建样式
    var styles = {
        'route': new ol.style.Style({
            stroke: new ol.style.Stroke({
                width: 5,
                color: 'blue'
            })
        }),
        'geoMarker': new ol.style.Style({
            image: new ol.style.Icon({
                rotation:90,
                src: 'img/arrow_30.png'
            })
        })
    };

    var center = [84.94869232177734, 41.124229431152344];
    var animating = false;
    var speed, now;

    var resolutions = new Array(19);
    var matrixIds = new Array(19);
    for (var z = 0; z < 19; z++) {
        matrixIds[z] = z;
    }
    var projection = new ol.proj.get('EPSG:4326');
    var projectionExtent = projection.getExtent();
    resolutions = [
        1.40625,
        0.703125,
        0.3515625,
        0.17578125,
        0.087890625,
        0.0439453125,
        0.02197265625,
        0.010986328125,
        0.0054931640625,
        0.00274658203125,
        0.001373291015625,
        0.0006866455078125,
        0.00034332275390625,
        0.000171661376953125,
        0.0000858306884765625,
        0.00004291534423828125,
        0.000021457672119140625,
        0.000010728836059570312,
        0.000005364418029785156,
        0.000002682209014892578,
        0.000001341104507446289
    ];
    var webKey = "c50a3a6c09ae3d1a13294c1083a0f611";
    var map_vector_layer = new ol.layer.Tile({
        opacity: 1,
        source: new ol.source.WMTS({
            // 矢量图层
            url: "http://t0.tianditu.gov.cn/vec_c/wmts?tk=" + webKey,
            layer: 'vec',
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',

            projection: projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            wrapX: false
        })
    });

    var map_lettering_layer = new ol.layer.Tile({
        opacity: 1,
        source: new ol.source.WMTS({
            // 矢量注记
            url: "http://t0.tianditu.gov.cn/cva_c/wmts?tk=" + webKey,
            layer: 'cva',
            matrixSet: 'c',
            format: 'tiles',
            style: 'default',
            projection: projection,
            tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                extent: [-180.0, -90.0, 180.0, 90.0],
                resolutions: resolutions,
                matrixIds: matrixIds
            }),
            wrapX: false
        })
    });
    var view1 = new ol.View({
        center: [84.94869232177734, 41.124229431152344],
        zoom: 6,
        minZoom: 1,
        maxZoom: 18,
        projection: "EPSG:4326",
        multiWorld: true,
    });




    // 创建要素图层
    var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                routeFeature,
                geoMarker
            ]
        }),
        style: function (feature) {
            if (animating && feature.get('type') === 'geoMarker') {
                return null;
            }
            return styles[feature.get('type')];
        }
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false,
            // zoom: false,
            rotate: false
        }),
        target: 'map',
        view: view1,
        layers:[map_vector_layer,map_lettering_layer,vectorLayer],
    });

    // 监听事件
    var moveFeature = function (event) {
        var vectorContext = event.vectorContext;
        var frameState = event.frameState;

        if (animating) {
            var elapsedTime = frameState.time - now;
            var index = Math.round(speed * elapsedTime / 1000);
            if (index >= routeLength) {
                stopAnimation(true);
                return;
            }

            var currentPoint = new ol.geom.Point(routeCoords[index]);
            var feature = new ol.Feature(currentPoint);
            vectorContext.drawFeature(feature, styles.geoMarker);
        }
        map.render();
    };

    // 开始动画
    function startAnimation() {
        if (animating) {
            stopAnimation(false);
        } else {
            animating = true;
            now = new Date().getTime();
            speed = 10;
            geoMarker.setStyle(null);
            //map.getView().setCenter(center);
            map.on('postcompose', moveFeature);
            map.render();
        }
    }

    // 停止动画
    function stopAnimation(ended) {
        animating = false;
        var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];
        (geoMarker.getGeometry()).setCoordinates(coord);
        map.un('postcompose', moveFeature);
    }

    // 轨迹回放
    $('#btn').click(function () {
        startAnimation();
    })
</script>
</body>
</html>